{% extends 'base.html' %}

{% block title %}
    我的博客
{% endblock %}

{% block header %}
        <link rel="stylesheet" href="{% static 'Bootstrap/font/bootstrap-icons.css' %}">
        <script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>
{% endblock %}

{% block main %}
    <h1 class="mb-3">我的博客</h1>
    {% if blogs %}
        {% for blog in blogs %}
            <div class="card mb-4">
                <div class="card-header" style="display: flex;justify-content: space-between;">
                    <div><a href="{% url 'blog:blog_detail' blog_id=blog.id %}">{{ blog.title }}</a></div>
                    <div>
                        <a href="#" id="delete_btn" data-bs-toggle="modal" data-bs-target="#deleteModal" data-blog-id="{{ blog.id }}" style="margin-right: 5px;">
                            <i class="bi bi-trash" style="font-size: 16px; color: cornflowerblue;"></i> 删除
                        </a>
                    </div>

                </div>
                <div class="card-body" style="height: 150px;overflow: hidden">
                    <p class="card-text">{{ blog.content|striptags | truncatechars:885 }}</p>
                </div>
                <div class="card-footer text-muted" style="height: 40px;display: flex;justify-content: space-between;align-items: center">
                    <div>
                        <img src="{% static 'image/头像.jpg' %}" alt="" height=30px class="rounded-circle">
                        <span>{{ blog.author.username }}</span>
                    </div>
                    <div>
                        发布时间：{{ blog.pub_time|date:'Y年m月d日 H:i:s' }}
                    </div>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="text-center" style="height: 700px;">
            <img src="{% static 'image/暂无内容.webp' %}" alt="">
            <p class="text-secondary">暂未发布博客，快去发布吧！</p>
        </div>
    {% endif %}
    <!-- 删除模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true" >
        <div class="modal-dialog" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">删除博客</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除这篇博客吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-outline-primary" id="confirmDelete">确认删除</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block footer %}
    <script>
        $(document).ready(function() {
            $('#confirmDelete').on('click', function() {
                var blogId = $('#delete_btn').data('blog-id');
                console.log(blogId)
                // 发送AJAX请求到后端删除博客
                $.ajax({
                    url: "/user/delete_blog/" + blogId,
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function(response) {
                        // 关闭模态框
                        $('#deleteModal').modal('hide');

                        // 移除已删除的博客卡片
                        $('#deleteModal').prev('.card').remove();

                        // 显示删除成功的提示
                        var alertHtml = '<div class="alert alert-success alert-dismissible fade show" role="alert" style="position: absolute;top: 100px;right: 20px;width: 250px;">' +
                            response.message +
                            '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                        '</div>';
                        $('body').append(alertHtml);
                        // 延迟一秒后重定向到博客列表页面
                        setTimeout(function() {
                            window.location.href = '{% url "blog_user:myblog" %}';
                        }, 1000); // 1000毫秒（1秒）后执行
                    },
                    error: function(xhr, status, error) {
                        // 关闭模态框
                        $('#deleteModal').modal('hide');

                        // 显示删除失败的提示
                        var alertHtml = '<div class="alert alert-danger alert-dismissible fade show" role="alert" style="position: absolute;top: 100px;right: 20px;width: 250px;">' +
                            '删除失败，请稍后重试。' +
                            '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                        '</div>';
                        $('body').append(alertHtml);
                    }
                });
            });
        });
    </script>
{% endblock %}